﻿@model Mvc_Examples.Models.ToDoViewModel
@using MVCControlsToolkit.Core;
@using MVCControlsToolkit.Controls;
@using MVCControlsToolkit.Controls.Bindings;
@using MVCControlsToolkit.DataAnnotations;
@using MVCControlsToolkit.Linq;
@using Mvc_Examples.Controls;
@using Mvc_Examples.Models;

@using System.Linq.Expressions;


@{
    ViewBag.Title = "Display Grid";
}
 @{ThemedControlsStrings.SetTheme("Test");}
<h2>My ToDo List (Display Only)</h2>
@{Html.EnableClientValidation();}

 <form action="/"> @* This is the first form of the page so the Client ViewModel will be associated with it.
                    We don't need to submit the Client Model with all Grid Data, so we put it in a dummy form *@
 </form>


    <div  id="root">
        <div id="toDoContainer">
            <table >
                  <thead>
                    <tr>
                        <td class="ToDoHeader"><strong>@Html.SortButtonForCollection(m => m.DataPage.ToDoList, m => m.Name, sortButtonStyle: SortButtonStyle.Button) </strong></td>
                        <td class="ToDoHeader"><strong>@Html.SortButtonForCollection(m => m.DataPage.ToDoList, m => m.DueDate, sortButtonStyle: SortButtonStyle.Button)</strong></td>
                        <td class="ToDoHeader"><strong>@Html.ColumnNameForCollection(m => m.DataPage.ToDoList, m => m.Description)</strong></td>
                    </tr>
                </thead>
           
           @Html.ClientBlockRepeater(m => m.DataPage.ToDoList,
                    _S.H<ToDoView>(
                @<tr>         
                    <td class="ToDo">
                        @item._D(m => m.Name)
                    </td>
                    <td class="editor-field">
                        @item._D(m => m.DueDate)
                    </td>
                    <td class="ToDo">
                        @item._D(m => m.Description)
                    </td>
                </tr>
                ),
                ExternalContainerType.tbody,
                            new { id = "ToDoContainer" },
                            applyClientValidation: false,
                            templateEngine: "nativeTemplateEngine") 
         </table>   
        </div> 
        
        
        @*Basic DataFilterClauseFor Start*@
       <div >
            @{var hName = Html.DataFilterClauseFor(
                  m => m.ToDoFilter, f => f.Name,
                  "byNameFilter",
                  MVCControlsToolkit.Linq.FilterCondition.StartsWith);}
            @hName.CheckBoxFor(m => m.Selected, new { @class = "byNameFilter_checkbox" })
             &nbsp; Filter by name 
            <span  class="byNameFilter">
                @hName.FilterClauseSelect(
                    hName.ViewData.Model.Condition,
                    (Expression<Func<ToDoView, string>>)(m => m.Name),
                    conditions: CanSortAttribute.AllowedForProperty(typeof(ToDoView), "Name")| FilterCondition.Contains)
                @hName.TypedTextBoxFor(m => m.Search, watermarkCss: "watermark")
            </span>  
            @hName.ViewsOnOff("byNameFilter", false)
        </div>
        <div>
            @{var hFromDate = Html.DataFilterClauseFor(m => m.ToDoFilter, f => f.DueDate, "fromDateFilter");}
            @hFromDate.CheckBoxFor(m => m.Selected, new { @class = "fromDateFilter_checkbox" })
             &nbsp; From: 
            <span class="fromDateFilter">
                @{hFromDate.ViewData.Model.Condition = MVCControlsToolkit.Linq.FilterCondition.GreaterThanOrEqual;}
                @hFromDate.HiddenFor(m => m.Condition)
                @hFromDate.DateTimeFor(m => m.Search, DateTime.Today.AddMonths(-6), true).DateCalendar(inLine: false, calendarOptions: new CalendarOptions
                       {
                           ChangeYear = true,
                           ChangeMonth = true,
                       })
               
            </span> 
            @hFromDate.ViewsOnOff("fromDateFilter", false)
        </div>
        <div>
            @{var hToDate = Html.DataFilterClauseFor(m => m.ToDoFilter, f => f.DueDate, "toDateFilter");}
            @hToDate.CheckBoxFor(m => m.Selected, new { @class = "toDateFilter_checkbox" })
             &nbsp; To: 
            <span class="toDateFilter">
                @{hToDate.ViewData.Model.Condition = MVCControlsToolkit.Linq.FilterCondition.LessThanOrEqual;}
                @hToDate.HiddenFor(m => m.Condition)
                @hToDate.DateTimeFor(m => m.Search, DateTime.Today.AddMonths(6), true).DateCalendar(inLine: false, calendarOptions: new CalendarOptions
                        {
                           ChangeYear = true,
                           ChangeMonth = true,
                       })
            </span>
             @hToDate.ViewsOnOff("toDateFilter", false) 
        </div>
        @*Basic DataFilterClauseFor End*@ 

       
             @*Mixed DataFilterClauseFor and DataFilterBuilder Start*@
         <div class="ToDoPager">
                    @{ var pager = Html.ClientPagerFor(m => m.DataPage.CurrPage, m => m.DataPage.TotalPages, "(", ")");}
                    @pager.PageButton("<<", PageButtonType.First, PageButtonStyle.Link) 
                    @pager.PageButton("<", PageButtonType.Previous, PageButtonStyle.Link) 
                    @pager.PageChoice(4) 
                    @pager.PageButton(">", PageButtonType.Next, PageButtonStyle.Link) 
                    @pager.PageButton(">>", PageButtonType.Last, PageButtonStyle.Link) 
                    @pager.PageButton("Go To", PageButtonType.GoTo, PageButtonStyle.Button)
                    @pager.GoToText(new { style = "width:50px;" }) 
       </div>            
        
        <input id="Button1" type="button" data-bind='click: function(x){x.Refresh();}' value="Refresh" />
        @Html.EnableSortingNoTrackFor(m => m.DataPage.ToDoList, m => m.ToDoOrder, "NormalHeaderToDo", "AscendingHeaderToDo", "DescendingHeaderToDo", page: m => m.DataPage.CurrPage, causePostback: false, oneColumnSorting: true) 
        
        

    </div>
  

<script type="text/javascript">

    //var query = mvcct.oDataQueryable('@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "ToDo"})', mvcct.$$.and);
    var query = JsActions.JsQueryables.ToDo.Get(mvcct.$$.and);
    query.importSortingControl('@Html.PrefixedId(m => m.ToDoOrder)');//import default sorting (necessary for paging

</script>



 